<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('签到')"/>
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-record-add">
        <style>
            @media (max-width: 767px) {
                .form-group {
                    display: flex;
                    align-items: center;
                    flex-direction: row;
                }

                .control-label {
                    width: 30%;
                    padding-right: 10px;
                    text-align: right !important;
                    margin-bottom: 0;
                }

                .col-sm-8 {
                    width: 70%;
                    padding-left: 0;
                    text-align: left;
                }

                .col-sm-offset-3 {
                    margin-left: 0;
                    text-align: center;
                }
            }
        </style>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">科室：</label>
                <div class="col-sm-8">
                    <input name="department" class="form-control" type="text" required/>
                    <input name="meetingId" type="hidden" th:value="${meetingId}"/>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">姓名：</label>
                <div class="col-sm-8">
                    <input name="realname" class="form-control" type="text" required/>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">手机号：</label>
                <div class="col-sm-8">
                    <input name="phone" class="form-control" type="text" required pattern="^1[3-9]\d{9}$"
                           title="请输入正确的11位手机号码">
                </div>
            </div>
        </div>
        <!--<div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">职务：</label>
                <div class="col-sm-8">
                    <input name="post" class="form-control" type="text">
                </div>
            </div>
        </div>-->
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">是否参会：</label>
                <div class="col-sm-8">
                    <label class="radio-inline">
                        <input type="radio" name="attendFlag" value="1" checked> 是
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="attendFlag" value="0"> 否
                    </label>
                </div>
            </div>
        </div>
        <div id="leaveReasonContainer" style="display:none;">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required">请假类别：</label>
                    <div class="col-sm-8">
                        <select name="leaveType" class="form-control" required>
                            <option value="">请选择</option>
                            <option value="0">门诊</option>
                            <option value="1">手术</option>
                            <option value="2">会议</option>
                            <option value="3">因公学习</option>
                            <option value="4">外事</option>
                            <option value="5">医联体</option>
                            <option value="6">年休</option>
                            <option value="7">病假</option>
                            <option value="8">其他</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">请假原因：</label>
                    <div class="col-sm-8">
                        <textarea name="leaveReason" class="form-control" rows="6"></textarea>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">附件上传：</label>
                    <div class="col-sm-8">
                        <input id="singleFile" name="file" type="file">
                        <input name="attachment" id="attachment" type="hidden" />
                    </div>
                </div>
            </div>
        </div>
        <!--<div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <input name="remark" class="form-control" type="text">
                    <textarea name="leaveReason" class="form-control" rows="6"></textarea>
                </div>
            </div>
        </div>-->
        <div class="col-xs-12">
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-8">
                    <button type="button" class="btn btn-primary" onclick="submitHandler()">提交</button>
                </div>
            </div>
        </div>

    </form>
</div>
<!-- 浮动统计按钮 -->
<div style="position:fixed; right:20px; bottom:20px; z-index:9999;">
    <a th:href="@{/app/record/statistics/{meetingId}(meetingId=${meetingId})}" class="btn btn-primary btn-circle btn-xl"
       style="width:50px; height:50px; border-radius:25px; display:flex; align-items:center; justify-content:center;">
        <i class="fa fa-bar-chart"></i>
    </a>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
    var prefix = ctx + "app/record"

    // 初始化时绑定radio按钮change事件
    $(document).ready(function () {
        $("input[name='attendFlag']").change(function () {
            if ($(this).val() === "0") {
                $("#leaveReasonContainer").show();
            } else {
                $("#leaveReasonContainer").hide();
            }
        });

        // 单图上传
        $("#singleFile").fileinput({
            uploadUrl: ctx + 'app/record/upload',
            maxFileCount: 1,
            showPreview: false,
            autoReplace: true
        }).on('fileuploaded', function (event, data, previewId, index) {
            var rsp = data.response;
            if (rsp.code === 0) {
                $("#attachment").val(rsp.fileName)
                $.modal.alertSuccess('文件上传成功!');
            } else {
                $.modal.alertError(rsp.msg);
            }
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        });
    });

    $("#form-record-add").validate({
        focusCleanup: true,
        rules: {
            phone: {
                required: true,
                isPhone: true,
            },
            leaveType: {
                required: {
                    depends: function (element) {
                        return $("input[name='attendFlag']:checked").val() === "0";
                    }
                }
            },
            leaveReason: {
                required: {
                    depends: function (element) {
                        return $("input[name='attendFlag']:checked").val() === "0";
                    }
                }
            }
        },
        messages: {
            leaveReason: {
                required: "请输入请假原因"
            },
            phone: {
                required: "请输入手机号",
                isPhone: "请输入正确的11位手机号码"
            }
        }
    });

    function submitHandler() {
        if ($.validate.form()) {
            var config = {
                url: prefix + "/add",
                type: "post",
                dataType: "json",
                data: $('#form-record-add').serialize(),
                beforeSend: function (xhr, settings) {
                    var csrftoken = $('meta[name=csrf-token]').attr('content');
                    if (($.common.equalsIgnoreCase(settings.type, "POST"))) {
                        xhr.setRequestHeader("X-CSRF-Token", csrftoken);
                    }
                    $.modal.loading("正在处理中，请稍候...");
                    $.modal.disable();
                },
                success: function (result) {
                    $.modal.closeLoading();
                    if (result.code == web_status.SUCCESS) {
                        if ($("input[name='attendFlag']:checked").val() == "1") {
                            $.modal.alertSuccess("签到成功!")
                        } else {
                            $.modal.alertSuccess("请假成功!")
                        }
                    } else if (result.code == web_status.WARNING) {
                        $.modal.alertWarning(result.msg)
                    } else {
                        $.modal.alertError(result.msg);
                    }
                    $('#form-record-add')[0].reset();
                    $.modal.closeLoading();
                }
            };
            $.ajax(config)
            // $.operate.save(prefix + "/add", $('#form-record-add').serialize());
        }
    }
</script>

</body>
</html>